<template>
  <div class="register">
	<div class="regBg">
    <div class="registerHeader">
      <img :src="logImg" alt="">
	  <img src="../../assets/login/back.png" class="backImg" alt="" @click="closeRegister">
    </div>
    <div class="registerContent">
      <zyInfoPanel title="基本信息" :showUnfoldButton="false" class="registerBaseInfo">
        <zy-modal-info :model-info="company_type === 1? companyRegisterInfo : cooperRegisterInfo"
                       class="registerBaseContent" :cellNum="2" titleWidth="200"></zy-modal-info>
      </zyInfoPanel>
      <zyInfoPanel title="附件上传" :showUnfoldButton="false" class="registerImgInfo">
        <div class="registerImgContent">
          <div class="imgItem">
            <div class="itemTitle required">营业执照（副本）</div>
            <div class="itemContent">
              <el-upload
                  class="upload-demo"
                  drag
                  action=""
                  :httpRequest="uploadFile"
                  :data="{type: 'license_img'}"
                  accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                  :show-file-list="false"
              >
                <zy-image v-model="license_img" v-if="license_img" @removeImage="removeImage(license_img)"></zy-image>
                <img src="../../assets//login/imgBg1.png" class="uploadImg" alt="" v-else>
              </el-upload>
            </div>
          </div>
          <div class="imgItem card">
            <div class="itemTitle required">身份证（正面）</div>
            <div class="itemContent">
              <el-upload
                  class="upload-demo"
                  drag
                  action=""
                  :httpRequest="uploadFile"
                  :data="{type: 'legal_card_pros'}"
                  accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                  :show-file-list="false"
              >
                <zy-image v-model="legal_card_pros" v-if="legal_card_pros"
                          @removeImage="removeImage(legal_card_pros)"></zy-image>
						  <img src="../../assets//login/imgBg2.png" class="uploadImg" alt="" v-else>
              </el-upload>
            </div>
          </div>
		  <div class="imgItem card">
            <div class="itemTitle required">身份证（反面）</div>
            <div class="itemContent">
              <el-upload
                  class="upload-demo"
                  drag
                  action=""
                  :httpRequest="uploadFile"
                  :data="{type: 'legal_card_cons'}"
                  accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                  :show-file-list="false"
              >
                <zy-image v-model="legal_card_cons" v-if="legal_card_cons"
                          @removeImage="removeImage(legal_card_cons)"></zy-image>
						  <img src="../../assets//login/imgBg3.png" class="uploadImg" alt="" v-else>
              </el-upload>
            </div>
          </div>
        </div>

      </zyInfoPanel>
    </div>
  </div>
  <div class="btnArea">
          <zy-button type="primary" @click="submit" class="btn">提交</zy-button>
          <zy-button @click="closeRegister" class="btn">返回</zy-button>
        </div>
</div>
</template>

<script>
	export default {
		name: "zy-register",
		props: {
			company_type: {
				type: Number,
				default: () => 0
			}
		},
		data() {
			return {
				logImg: require('@/assets/login/logo.png'),
				companyRegisterInfo: [
					{
						title: '企业类型',
						name: 'type',
						type: 'select',
						value: '',
						titleClass: 'required',
						optionList: [
							{label: '物流', value: '0'},
							{label: '快递', value: '1'},
							{label: '分拣站', value: '2'},
						]
					},
					{
						title: '站点名称',
						name: 'company_name',
						type: 'input',
						maxlength: '50',
						value: '',
						titleClass: 'required'
					},
					{
						title: '站点地址',
						name: 'address',
						type: 'location',
						btnName: '定位',
						isShowIcon: true,
						value: {},
						titleClass: 'required'
					},
					{
						title: '法人姓名',
						name: 'legal_person',
						type: 'input',
						maxlength: '20',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人联系方式',
						name: 'legal_phone',
						type: 'input',
						tag: 'mobile',
						maxlength: '11',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人身份证号码',
						name: 'legal_card_no',
						type: 'input',
						maxlength: '18',
						value: '',
						titleClass: 'required'
					},
					{
						title: '统一社会信用代码',
						name: 'organization_code',
						type: 'input',
						maxlength: '20',
						value: '',
						titleClass: 'required'
					},
					{
						title: '负责人',
						name: 'control_man',
						type: 'input',
						maxlength: '100',
						value: '',
						titleClass: 'required'
					},
					{
						title: '联系方式',
						name: 'control_phone',
						type: 'input',
						maxlength: '11',
						tag: 'mobile',
						value: '',
						titleClass: 'required'
					},
				],
				cooperRegisterInfo: [
					{
						title: '站点名称',
						name: 'company_name',
						type: 'input',
						maxlength: '50',
						value: '',
						titleClass: 'required'
					},
					{
						title: '站点地址',
						name: 'address',
						type: 'location',
						btnName: '定位',
						value: {},
						titleClass: 'required'
					},
					{
						title: '法人姓名',
						name: 'legal_person',
						type: 'input',
						maxlength: '20',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人联系方式',
						name: 'legal_phone',
						type: 'input',
						tag: 'mobile',
						maxlength: '11',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人身份证号码',
						name: 'legal_card_no',
						type: 'input',
						maxlength: '18',
						value: '',
						titleClass: 'required'
					},
					{
						title: '统一社会信用代码',
						name: 'organization_code',
						type: 'input',
						maxlength: '20',
						value: '',
						titleClass: 'required'
					},
					{
						title: '负责人',
						name: 'control_man',
						type: 'input',
						maxlength: '100',
						value: '',
						titleClass: 'required'
					},
					{
						title: '联系方式',
						name: 'control_phone',
						type: 'input',
						tag: 'mobile',
						maxlength: '11',
						value: '',
						titleClass: 'required'
					},
				],
				license_img: '',
				legal_card_pros: '',
				legal_card_cons: '',
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			uploadFile(params) {
				let type = params.data.type;
				this.$axios.post(this.$api.uploadFile, {
					isFile: true,
					file: params.file,
					operator: 'goods',
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this[type] = res.data.url;
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			removeImage(type) {
				this[type] = '';
			},
			submit() {
				let {postData, tipText} = this.$dataValidation(this.company_type === 1 ? this.companyRegisterInfo : this.cooperRegisterInfo);
				if (tipText) {
					return this.$message.error(tipText);
				}
				if (!this.license_img) {
					return this.$message.error('请上传营业执照（副本）');
				}
				if (!this.legal_card_pros) {
					return this.$message.error('请上传身份证正面');
				}
				if (!this.legal_card_cons) {
					return this.$message.error('请上传身份证反面');
				}
				postData['license_img'] = this.license_img;
				postData['legal_card_pros'] = this.legal_card_pros;
				postData['legal_card_cons'] = this.legal_card_cons;
				postData.company_address = postData.address.address;
				postData.lng = postData.address.lng;
				postData.lat = postData.address.lat;
				postData.company_type = this.company_type;
				postData.type = this.company_type;
				delete postData.address;
				this.$axios.post(this.$api.regisetCompany, {
					...postData
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this.closeRegister();
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			closeRegister() {
				this.$emit('closeRegister')
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/login/login.less">

</style>
<style scoped lang="less">
  /deep/ .el-upload-dragger{
    width: 270px;
	height: 190px;
}</style>